<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册随逸购</title>
    <link rel="stylesheet" href="./static/muse-ui.css">
    <link rel="stylesheet" href="./static/register.css">
	<script src="./static/vue.js"></script>
	<script src="./static/muse-ui.js"></script>
	<script src="./js/axios.js"></script>
	<script src="./static/smsCode.js"></script>
	<script src="./static/jquery.min.js"></script>
	<script src="./static/layer/layer.js" type="text/javascript" ></script>
	<style type="text/css">
	.sms-code {position: relative;width: 100%;}
	</style>
</head>
<body>
	<div class="regist" id="app">
	    <!-- <mu-appbar title="注册随逸购"></mu-appbar> -->
	    <div class="bga">
	    	<img src="static/logo.png" alt="">
	    </div>
	    <div class="registbg">
	    	
	    </div>
	    <div class="registform">
	    	<div class="registforms">
	    	    <mu-form ref="form" :model="validateForm" class="regist-content">
			      <mu-form-item  prop="mobile" :rules="mobileRules">
			        <mu-text-field v-model="validateForm.mobile" prop="mobile" placeholder="请输入手机号码"></mu-text-field>
			      </mu-form-item>
			      <!-- <mu-form-item  prop="smscode" :rules="smscodeRules">
				     <sms-code v-model="validateForm.smscode" :phone="validateForm.mobile" @getCode="getCode" :opens="opens" prop="smscode"></sms-code>
					</mu-form-item> -->
						<mu-form-item  prop="smscode" :rules="smscodeRules">
							<div class="sms-code">
								<mu-text-field type="tel" placeholder="输入验证码" v-model="validateForm.smscode" fullWidth />
								<mu-button flat color="#ff0036" style="white-space: nowrap;" @click="getCode" :disabled="canSend">{{codeMsg}}
								</mu-button>
							</div>
						</mu-form-item>
			      <mu-form-item prop="password" :rules="passwordRules">
			        <mu-text-field type="password" v-model="validateForm.password" prop="password" placeholder="请输入登录密码"></mu-text-field>
			      </mu-form-item>
<!-- 			      <mu-form-item prop="tradepassword" :rules="tradeRules">
			        <mu-text-field type="password" v-model="validateForm.tradepassword" prop="tradepassword" placeholder="请输入交易密码"></mu-text-field>
			      </mu-form-item> -->
			      <mu-form-item  prop="invitecode" :rules="invitecodeRules">
			        <mu-text-field v-model="validateForm.invitecode" prop="invitecode" placeholder="请输入邀请码"></mu-text-field>
			      </mu-form-item>
			      <mu-form-item style="margin-top:30px;margin-bottom: 0;">
			        <mu-button class="common-btn" @click="regist" :disabled="validateForm.mobile == ''  || validateForm.smscode == '' || validateForm.password == '' || validateForm.invitecode == ''">
			        	立即加入
			        </mu-button>
			      </mu-form-item>
			    </mu-form>
			    <div class="downloads">
			    	<a href="https://fir.im/4c1a">
			    		<span class="spa">
			    			我已注册，
			    		</span>
			    		<span class="spb">
			    			 直接下载
			    		</span>
			    	</a>
			    </div>
	        </div>
	    </div>
	    <div class="bags" v-if="show">
	    	<div class="bagscon">
	    		<div class="bagscons">
                   	<div id="captcha" style="position: relative"></div>
	    	    </div>
	    	</div>
	    </div>

    </div>
	<script src="./static/jigsaw.min.js" type="text/javascript" ></script>
	<script>
    Vue.use(MuseUI)
    var url = 'http://tengyitong.cn/api.html'
    var regist = new Vue({
      el: '#app',
      methods: {
      	// 手机验证码
				getCode() {
					const formData = {
						type: '0',
						mobile: this.validateForm.mobile,
					}
					if (!(/^[1][3-9][0-9]{9}$/.test(this.validateForm.mobile))) {
						alert("请输入正确的手机号！");
						return
					} else {
						let data = {
							code: 'reg',
							method:'user.sms',
							mobile:this.validateForm.mobile,
						};

						//发送短信
						axios.post(url, data).then(res => {
							alert(res.data.msg)
						})
					}

					this.canSend = true;
					this.startTime = new Date().getTime();
					localStorage.setItem('SMSCodeStratTime', this.startTime);
					this.sending();
				},
				sending() {
					//验证码倒计时
					let app = this;
					let now = new Date().getTime();
					let time = Math.round((now - app.startTime) / 1000);
					app.codeMsg = `稍等${app.time - time}秒`
					if (time >= app.time) {
						app.canSend = false;
						app.startTime = null;
						app.timer = null;
						app.codeMsg = `获取验证码`
						localStorage.removeItem('SMSCodeStratTime')
					} else {
						app.timer = setTimeout(function () {
							app.sending();
						}, 1000)
					}
				},

        //注册
        regist: function () {
          let app = this;
          $.ajax({
            url:url,
            dataType: 'json',
            type: 'POST',
            data: {
              	method: 'user.smslogin',
								mobile: app.validateForm.mobile,
								password: app.validateForm.password,
								code: app.validateForm.smscode,
								invitecode: app.validateForm.invitecode
            },
            success: function (r) {
              if (r.status) {
                layer.msg('注册成功');
                window.location.href = 'https://fir.im/4c1a';
              } else {
                layer.msg(r.msg);
              }
            }
          })
        }
      },
      data: function () {
        return {
        	show:false,
					opens:false,
					codeMsg: '获取验证码',
					canSend: false,
					timer: null,
					startTime: null,
					time: 60, //倒计时60秒
            validateForm: {
		        mobile: "",//手机号码
		        smscode:"",//手机验证码
		        password:'',//登录密码
		        tradepassword:'',//交易密码
		        invitecode:'',//邀请码
		    },
		    mobileRules: [
	        { validate: val => !!val, message: "请输入手机号码" },
	        {
	          validate: val => /^[1][3-9][0-9]{9}$/.test(val),
	          message: "请输入正确的手机号码"
	        }
	        ],
	        passwordRules: [
	        { validate: val => !!val, message: "请输入登录密码" },
	        {
	          validate: val => val.length >= 6 && val.length <= 20,
	          message: "登录密码长度大于等于6小于等于20"
	        }
	        ],
	        tradeRules: [
	        { validate: val => !!val, message: "请输入交易密码" },
	        {
	          validate: val => /^[0-9]{6}$/.test(val),
	          message: "交易密码为6位数字"
	        }
//	        {
//	          validate: val => val.length == 6 ,
//	          message: "交易密码长度等于6"
//	        }
	        ],
	        smscodeRules: [{ validate: val => !!val, message: "请输入验证码" }],
	        invitecodeRules: [{ validate: val => !!val, message: "请输入邀请码" }],
        }
      },
      created() {
        let search = window.location.search
        search = search.substr(1, search.length - 1);
        let id = search.split('=')[1];
        if (id) {
          this.validateForm.invitecode = id;
        }
      },

    });
     
  </script>
</body>
</html>